<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="50%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalBoxData"
          :rules="rulesTerminalBox"
          ref="formTerminalBoxData"
          label-width="100px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalBoxData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalBoxData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="handlePulseIssueConfigure">脉冲配置下发</el-button>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="handleLevelIssueConfigure">电平配置下发</el-button>
          </el-form-item>
        </el-form>

        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="parameterconfiguration">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminal"
          ref="formTerminalData"
          :inline="true"
          label-width="120px"
        >
          <el-divider content-position="left">4G盒子下发参数</el-divider>
          <el-form-item label="投币脉冲间隔" prop="insertcoinspulsespace">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.insertcoinspulsespace"
              placeholder="投币脉冲间隔(0-60000)毫秒 1000毫秒为1秒"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="投币脉冲宽度" prop="insertcoinspulsewidth">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.insertcoinspulsewidth"
              placeholder="投币脉冲宽度(0-60000)毫秒 1000毫秒为1秒"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="投币信号电平" prop="insertcoinssignallevel">
            <el-select
              v-model="formTerminalData.sysDeviceBoxConfigVO.insertcoinssignallevel"
              placeholder="投币信号电平"
              style="width: 240px"
            >
              <el-option label="常开，高电平（掉电保存）" value="OUTPUT_HIGH_LEVEL_MEMORY" />
              <el-option label="常闭，低电平（掉电保存）" value="OUTPUT_LOW_LEVEL_MEMORY" />
              <el-option label="常开，高电平（掉电不保存）" value="OUTPUT_HIGH_LEVEL_NO_MEMORY" />
              <el-option label="常闭，低电平（掉电不保存）" value="OUTPUT_LOW_LEVEL_NO_MEMORY" />
            </el-select>
          </el-form-item>

          <el-form-item label="投币脉冲数" prop="c1insertcoinspulsecount">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.c1insertcoinspulsecount"
              placeholder="投币脉冲数(0-100)"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-divider content-position="left">应用功能参数</el-divider>
          <el-form-item label="功能模式" prop="pattern">
            <el-select
              v-model="formTerminalData.sysDeviceBoxConfigVO.pattern"
              placeholder="功能模式"
              style="width: 240px"
            >
              <el-option label="投币模式" value="0" />
              <el-option label="电平模式" value="1" />
            </el-select>
          </el-form-item>

          <el-form-item label="POS车应用" prop="isCarApp">
            <el-switch
              v-model="formTerminalData.sysDeviceBoxConfigVO.isCarApp"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="扣费顺序" prop="deductionMode">
            <el-select
              v-model="formTerminalData.sysDeviceBoxConfigVO.deductionMode"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('SYS_PAY_SORT')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="微信二维码Id" prop="wxOtherId">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.wxOtherId"
              placeholder="微信二维码Id"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="单次扣币数" prop="coinDeductionCount">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.coinDeductionCount"
              placeholder="请输入扣币数"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="散客单价" prop="fitPrice">
            <el-input
              v-model="formTerminalData.sysDeviceBoxConfigVO.fitPrice"
              placeholder="请输入散客单价"
              clearable
              size="small"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="投币调试" name="boxDebug">
        <el-form :model="boxDebug" ref="boxDebug" :inline="true" label-width="120px">
          <el-form-item label="投币次数" prop="throwCount">
            <el-input v-model="boxDebug.num" placeholder="投币次数" clearable size="small" />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button type="primary" @click="handleThrow">确定投币</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction, deBugCoin } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogBoxTerminal',
    dicts: ['SYS_PAY_SORT'],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        boxDebug: {
          num: 1,
        },
        activeName: 'essentialInfo',
        //        showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalBoxData: {},
        formTerminalData: {
          sysDeviceBoxConfigVO: {},
          insertcoinspulsespace: 0,
          insertcoinssignallevel: '0',
          insertcoinspulsewidth: 0,
          c1insertcoinspulsecount: 0,
          pattern: 0,
          isCarApp: false,
          coinDeductionCount: 0,
          settingList: undefined,
          wxOtherId: '',
        },
        terminalBox: {
          sysDeviceBoxConfigVO: {},
          insertcoinspulsespace: 0,
          insertcoinssignallevel: '0',
          insertcoinspulsewidth: 0,
          c1insertcoinspulsecount: 0,
          isCarApp: false,
          pattern: 0,
          coinDeductionCount: 0,
          wxOtherId: '',
        },
        deviceTypeList: [],
        rulesTerminalBox: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
        },
        rulesTerminal: {
          insertcoinspulsespace: [
            { required: true, message: '投币脉冲间隔不可为空！', trigger: 'blur' },
          ],
          insertcoinspulsewidth: [
            { required: true, message: '投币脉冲宽度不可为空！', trigger: 'blur' },
          ],
          insertcoinssignallevel: [
            { required: true, message: '投币信号电平不可为空！', trigger: 'blur' },
          ],
          c1insertcoinspulsecount: [
            { required: true, message: '投币脉冲数不可为空！', trigger: 'blur' },
          ],
          pattern: [{ required: true, message: '请选择功能模式方式！', trigger: 'blur' }],
          deductionMode: [{ required: true, message: '请选择扣费顺序', trigger: 'blur' }],
          coinDeductionCount: [{ required: true, message: '单次扣币数不可为空', trigger: 'blur' }],
        },
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      //调试投币
      handleThrow() {
        this.boxDebug.deviceCode = this.formTerminalBoxData.deviceCode;
        deBugCoin(this.boxDebug).then(() => {
          this.$modal.msgSuccess('操作成功！');
        });
      },
      // 表单重置
      reset() {},
      //终端设置
      getDeviceDetails() {
        deviceAction('BOX', 'getDeviceBoxDetails', this.deviceId).then((response) => {
          this.formTerminalData = response;
          this.formTerminalBoxData = response;
          if (this.formTerminalBoxData.isStatus == 1) {
            this.isStatus = false;
          }
          if (this.formTerminalBoxData.isUpgrade == 0) {
            this.isUpgrade = false;
          }
        });
      },
      //设备信息修改
      deviceInfoUpdate() {
        deviceAction('DEVICE', 'updateDevice', this.formTerminalBoxData).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      //参数修改
      configureUpdate() {
        deviceAction('BOX', 'getDeviceBoxConfigureInfoUpdate', this.formTerminalData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      //4G盒子配置下发
      issueConfigure() {
        deviceAction('BOX', 'issueConfigure', this.deviceId).then((response) => {
          if (response) {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          } else {
            ElMessage({
              message: '执行失败！',
              type: 'error',
            });
          }
        });
      },

      //脉冲配置下发
      handleIssueConfigure() {
        deviceAction('BOX', 'issuePulseConfigure', this.deviceId).then((response) => {
          if (response) {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          } else {
            ElMessage({
              message: '执行失败！',
              type: 'error',
            });
          }
        });
      },
      //电平配置下发
      handleLevelIssueConfigure() {
        deviceAction('BOX', 'issueLevelConfigure', this.deviceId).then((response) => {
          if (response) {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          } else {
            ElMessage({
              message: '执行失败！',
              type: 'error',
            });
          }
        });
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
